<template>
  <transition
    enterFromClass="fade_enter_from"
    leaveToClass="fade_leave_to"
    enterActiveClass="fade_enter_active"
    leaveActiveClass="fade_leave_active"
    enterToClass="fade_enter_to"
    leaveFromClass="fade_leave_from"
  >
    <div class="container">
      <div class="box">
        <div class="dot dot-1"></div>
        <div class="dot dot-2"></div>
        <div class="dot dot-3"></div>
      </div>

      <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <filter id="goo">
            <feGaussianBlur
              result="blur"
              stdDeviation="10"
              in="SourceGraphic"
            ></feGaussianBlur>
            <feColorMatrix
              values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7"
              mode="matrix"
              in="blur"
            ></feColorMatrix>
          </filter>
        </defs>
      </svg>
    </div>
  </transition>
</template>

<style scoped lang="less">
.fade_enter_from,
.fade_leave_to {
  opacity: 0;
}

.fade_enter_active,
.fade_leave_active {
  transition: opacity 0.3s ease;
}

.fade_enter_to,
.fade_leave_from {
  opacity: 1;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100vw - 32px);
  height: calc(100vh - 32px - 36px - 8px - 16px);
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 10px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 998;
}

.box {
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: url('#goo');
  animation: rotate-move 2s ease-in-out infinite;
}

.dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.dot-3 {
  background-color: #ff1717;
  animation: dot-3-move 2s ease infinite, index 6s ease infinite;
}

.dot-2 {
  background-color: #0051ff;
  animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
}

.dot-1 {
  background-color: #ffc400;
  animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
}

@keyframes dot-3-move {
  20% {
    transform: scale(1);
  }
  45% {
    transform: translateY(-18px) scale(0.6);
  }
  60% {
    transform: translateY(-90px) scale(0.6);
  }
  80% {
    transform: translateY(-90px) scale(0.6);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}

@keyframes dot-2-move {
  20% {
    transform: scale(1);
  }
  45% {
    transform: translate(-16px, 12px) scale(0.6);
  }
  60% {
    transform: translate(-80px, 60px) scale(0.6);
  }
  80% {
    transform: translate(-80px, 60px) scale(0.6);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}

@keyframes dot-1-move {
  20% {
    transform: scale(1);
  }
  45% {
    transform: translate(16px, 12px) scale(0.6);
  }
  60% {
    transform: translate(80px, 60px) scale(0.6);
  }
  80% {
    transform: translate(80px, 60px) scale(0.6);
  }
  100% {
    transform: translateY(0px) scale(1);
  }
}

@keyframes rotate-move {
  55% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  80% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes index {
  0%,
  100% {
    z-index: 3;
  }
  33.3% {
    z-index: 2;
  }
  66.6% {
    z-index: 1;
  }
}
</style>
